<style>
    .progress-bar{
        line-height: 27px;
        font-size: 14px;
    }
    .progress{
        height: 27px;
        background: #e2e1e1;
    }
    .standard {
        color: #999;
        font-size: 12px;
        width: 603px;
        border-top: 1px solid #ddd;
        position: relative;
        margin-top: 25px;
        left: 50%;
        margin-left: -301px;
        height: 85px
    }

    .standard .standard-block {
        float: left;
        width: 86px;
        text-align: center
    }

    .standard .standard-distance {
        position: absolute;
        top: -10px;
        left: 0
    }

    .standard .standard-distance .standard-block {
        border-left: 1px solid #ddd;
        height: 10px;
        width: 86px
    }

    .standard .standard-distance .standard-block:last-child {
        border-right: 1px solid #ddd
    }

    .standard p {
        position: absolute;
        top: 40px;
        left: 50%;
        margin-left: -217px
    }
</style>
<div class="row">
    <div class="col-md-12" style="padding-bottom: 30px">
        <h3 class="text-center">MBTI 倾向示意图（你更倾向于：{:strtoupper($ret)} 型）</h3>
    </div>
    {php}
    if(isset($img)){
    {/php}
    <div id="echart" style="width: 80%;height:300px; margin: 0 auto;">
        {php}
        foreach($img as $k => $v){
        {/php}
        <img src="{$v}" />
        {php}
        }
        {/php}
    </div>
    {php}
    }
    {/php}
    <div class="col-md-2"></div>


    <div class="col-md-12">
        <h3 class="text-center">MBTI 测评得分占比</h3>
        <div class="table-responsive">
            {php}
            $tr1 = '';
            $tr2 = '';
            $tr3 = '';


            $arr = ['e','i','s','n','t','f','j','p'];
            foreach($arr as $vv){
            foreach($ret_arr as $k => $v){
            if($k == $vv){
            $tr1 .= '<th>'.$v['name'].' '.strtoupper($k).'</th>';
            $tr2 .= '<td>'.$v['count'].'</td>';
            $tr3 .= '<td>'.($v['percent']*100).'%</td>';
            }
            }
            }
            {/php}
            <table class="table table-bordered mb0 text-center analysis">
                <thead>
                <tr class="active">
                    {$tr1}
                </tr>
                </thead>
                <tbody>
                <tr>
                    {$tr2}
                </tr>
                <tr>
                    {$tr3}
                </tr>
                </tbody>
            </table>
        </div>
    </div>
    <div class="col-md-12">
        <h3 class="text-center">MBTI 测评结果分析</h3>
        <br />

        <div class="panel panel-info">
            <div class="panel-heading">您的MBTI类型为：{:strtoupper($ret)}</div>
            <div class="panel-body">
                {$cates[$ret]}
            </div>
        </div>
    </div>
</div>